import {
    ProFormDateTimePicker,
    ProFormRadio,
    ProFormSelect,
    ProFormText,
    ProFormTextArea,
    StepsForm,
} from '@ant-design/pro-components';
import { Modal } from 'antd';
import React from 'react';

export interface FormValueType extends Partial<API.UserInfo> {
    target?: string;
    template?: string;
    type?: string;
    time?: string;
    frequency?: string;
}

export interface UpdateFormProps {
    onCancel: (flag?: boolean, formVals?: FormValueType) => void;
    onSubmit: (values: FormValueType) => Promise<void>;
    updateModalVisible: boolean;
    values: Partial<API.UserInfo>;
}

const UpdateForm: React.FC<UpdateFormProps> = (props) => (
    <StepsForm
        stepsProps={{
            size: 'small',
        }}
        stepsFormRender={(dom, submitter) => {
            return (
                <Modal
                    width={640}
                    bodyStyle={{ padding: '32px 40px 48px' }}
                    destroyOnClose
                    title="规则配置"
                    open={props.updateModalVisible}
                    footer={submitter}
                    onCancel={() => props.onCancel()}
                >
                    {dom}
                </Modal>
            );
        }}
        onFinish={props.onSubmit}
    >
        <StepsForm.StepForm
            initialValues={{
                name: props.values.name,
                nickName: props.values.nickName,
            }}
            title="基本信息"
        >
            <ProFormText
                width="md"
                name="name"
                label="规则名称"
                rules={[{ required: true, message: '请输入规则名称！' }]}
            />
            <ProFormTextArea
                name="desc"
                width="md"
                label="规则描述"
                placeholder="请输入至少五个字符"
                rules={[
                    {
                        required: true,
                        message: '请输入至少五个字符的规则描述！',
                        min: 5,
                    },
                ]}
            />
        </StepsForm.StepForm>
        <StepsForm.StepForm
            initialValues={{
                target: '0',
                template: '0',
            }}
            title="配置规则属性"
        >
            <ProFormSelect
                width="md"
                name="target"
                label="监控对象"
                valueEnum={{
                    0: '表一',
                    1: '表二',
                }}
            />
            <ProFormSelect
                width="md"
                name="template"
                label="规则模板"
                valueEnum={{
                    0: '规则模板一',
                    1: '规则模板二',
                }}
            />
            <ProFormRadio.Group
                name="type"
                width="md"
                label="规则类型"
                options={[
                    {
                        value: '0',
                        label: '强',
                    },
                    {
                        value: '1',
                        label: '弱',
                    },
                ]}
            />
        </StepsForm.StepForm>
        <StepsForm.StepForm
            initialValues={{
                type: '1',
                frequency: 'month',
            }}
            title="设定调度周期"
        >
            <ProFormDateTimePicker
                name="time"
                label="开始时间"
                rules={[{ required: true, message: '请选择开始时间！' }]}
            />
            <ProFormSelect
                name="frequency"
                label="监控对象"
                width="xs"
                valueEnum={{
                    month: '月',
                    week: '周',
                }}
            />
        </StepsForm.StepForm>
    </StepsForm>
);

export default UpdateForm;
